<!-- 列表页 -->
<template>
  <div class="c-list-page" v-loading="tableLoading">
    <div class="c-list-page__search card" v-if="$slots.search">
      <slot name="search" />
    </div>
    <div class="c-list-page__table card" ref="tableContentRef">
      <!-- 表格 -->
      <div class="c-list-page__table--content">
        <el-table
          ref="tableRef"
          stripe border
          :maxHeight="tableHeight"
          v-bind="tableProps"
          v-on="tableEvent">
           <slot name="table" />
        </el-table>
      </div>
      <!-- 分页 -->
      <div
        v-if="showPage"
        ref="paginationRef"
        class="c-list-page__table--pagination">
        <el-pagination
          background
          layout="prev, sizes, pager, next"
          v-bind="{
            ...defaultPageOptions,
            ...pageProps
          }"
          v-model:current-page="pageProps.currentPage"
          v-model:page-size="pageProps.pageSize"
          @size-change="handleSizeChange"
          @change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  // 表格属性
  tableProps: {
    type: Object,
    default: () => {}
  },
  // 表格事件
  tableEvent: {
    type: Object,
    default: () => {
      return {}
    }
  },
  // 分页属性
  pageProps: {
    type: Object,
    default: () => {}
  },
  // 是否显示分页
  showPage: {
    type: Boolean,
    default: true,
  },
})

// 分页默认参数
const defaultPageOptions = reactive({
  // 每页显示个数选择器的选项设置
  pageSizes: [15, 20, 50],
  defaultPageSize: 15
})


/* 自动计算表格最大高度 */
const tableContentRef = ref(null) // 表格+分页容器
const paginationRef = ref(null) // 分页容器
const tableHeight = ref(0) // 表格高度
const setTableHeight = () => {
  nextTick(() => {
    // 容器高度
    var clientHeight = tableContentRef.value.offsetHeight
    if(paginationRef.value) {
      // 表格高度 = 容器高度 - 分页高度
      clientHeight = clientHeight - paginationRef.value.offsetHeight
    }
    tableHeight.value = clientHeight
  })
}
setTableHeight()
onMounted(() => {
  window.addEventListener('resize', setTableHeight)
})
onUnmounted(() => {
  window.removeEventListener('resize', setTableHeight)
})


/**
 * 每页显示条目个数改变
 */
const handleSizeChange = () =>{
  // 当前页数改变为1
  props.pageProps.currentPage = 1
}

// 表格ref
const tableRef = ref(null)
// 表格区域加载数据时显示动效
const tableLoading = ref(false)
const emits = defineEmits(['getList'])
/**
 * 每页显示条目个数改变 或 当前页数改变
 * @param currentPage 当前页数,默认为1
 * @param pageSize 每页显示条目个数
 */
const handlePageChange = (currentPage=1, pageSize) => {
  tableLoading.value = true
  if(tableRef.value) tableRef.value?.setScrollTop(0)
  emits('getList', {
    current: currentPage,
    size: pageSize || props.pageProps?.pageSize || defaultPageOptions.defaultPageSize
  })
}


defineExpose({
  tableRef,
  tableLoading,
  handlePageChange
})
</script>

<style lang="scss" scoped>
.c-list-page{
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  & > .card + .card{
    margin-top: 20px;
  }
  &__search{
    padding-bottom: 20px;
    border-bottom: 3px dashed  var(--el-color-primary);
  }
  &__table{
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    &--content{
      // flex: auto;
      overflow: hidden;
      :deep(.el-table){
        --el-table-header-bg-color: #F4F4F4;
        --el-table-header-text-color: #FC7000;
      }
    }
    &--pagination{
      padding-top: 20px;
      :deep(.el-pagination){
        justify-content: flex-end;
        .el-pagination__sizes{
          margin-left: 0;
        }
      }
    }
  }
}
</style>
